<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>酒店管理</el-breadcrumb-item>
      <el-breadcrumb-item>酒店列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <el-row :gutter="35">
          <el-col :span="7">
            <el-input placeholder="请输入酒店名" v-model="queryInfo.query" clearable @clear="getHotelList()">
              <el-button slot="append" icon="el-icon-search" @click="getHotels"></el-button>
            </el-input>
        </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addDialogVisible=true">添加酒店</el-button>
          </el-col>
        </el-row>
         <el-table
            :data="hotelList"
            style="width: 100%"
            border
            stripe>
            <el-table-column type="index"></el-table-column>
            <el-table-column
              prop="hotelcode"
              label="酒店账号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="hotelname"
              label="酒店名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="hoteldec"
              label="酒店介绍"
              width="180">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="酒店电话">
            </el-table-column>
            <el-table-column
              prop="address"
              label="酒店地址">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" size="mini" @click="updateHotels(scope.row.hotelcode)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteHotel(scope.row.hotelcode)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.queryInfo.pagenum"
                :page-sizes="[1, 2, 3, 5, 10]"
                :page-size="this.queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>

              <el-dialog
                title="添加酒店"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClose">
                <el-form :model="addFrom" :rules="addFormRules" ref="addFormRef" label-width="100px">
                  <el-form-item label="酒店账号" prop="hotelcode">
                    <el-input v-model="addFrom.hotelcode"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店名称" prop="hotelname">
                    <el-input v-model="addFrom.hotelname"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店描述" prop="hoteldec">
                    <el-input v-model="addFrom.hoteldec"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店电话" prop="phone">
                    <el-input v-model="addFrom.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店地址" prop="address">
                    <el-input v-model="addFrom.address"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="addDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addHotels">确 定</el-button>
                </span>
              </el-dialog>

              <el-dialog
                title="修改酒店"
                :visible.sync="updateDialogVisible"
                width="50%"
                @close="updateDialogClose">
                <el-form :model="updateFrom" :rules="updateFormRules" ref="updateFormRef" label-width="100px">
                  <el-form-item label="酒店账号" prop="hotelcode">
                    <el-input v-model="updateFrom.hotelcode" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="酒店名称" prop="hotelname">
                    <el-input v-model="updateFrom.hotelname"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店描述" prop="hoteldec">
                    <el-input v-model="updateFrom.hoteldec"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店电话" prop="phone">
                    <el-input v-model="updateFrom.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="酒店地址" prop="address">
                    <el-input v-model="updateFrom.address"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="updateDialogClose">取 消</el-button>
                  <el-button type="primary" @click="updateHotelInfo">确 定</el-button>
                </span>
              </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default{
    name:'Hotel',
    data(){
      return{
        queryInfo : {
          query:'',
          pagenum:1,
          pagesize:2
        },
        addFrom:{
          hotelcode:'',
          hotelname:'',
          hoteldec:'',
          phone:'',
          address:''
        },
        updateFrom:{
          hotelcode:'',
          hotelname:'',
          hoteldec:'',
          phone:'',
          address:''
        },
        addFormRules:{
          hotelcode:[
            {required:true, message:'请输入账号', trigger:'blur'},
            {min:4, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          hotelname:[
            {required:true, message:'请输入酒店名', trigger:'blur'},
            {min:2, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          hoteldec:[
            {required:true, message:'请输入酒店介绍',trigger:'blur'},
            {min:2,max:50,message:'长度在0到50个字符',trigger:'blur'}
          ],
          phone:[
            {required:true, message:'请输入手机号', trigger:'blur'},
            {min:8, max:11,message:'长度在8到11个字符',trigger:'blur'}
          ],
          address:[
            {required:true, message:'请输入地址', trigger:'blur'},
            {min:1, max:3,message:'长度在0到30个字符',trigger:'blur'}
          ]
        },
        updateFormRules:{
          hotelcode:[
            {required:true, message:'请输入账号', trigger:'blur'},
            {min:4, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          hotelname:[
            {required:true, message:'请输入酒店名', trigger:'blur'},
            {min:2, max:16,message:'长度在4到16个字符',trigger:'blur'}
          ],
          hoteldec:[
            {required:true, message:'请输入酒店介绍',trigger:'blur'},
            {min:2,max:50,message:'长度在0到50个字符',trigger:'blur'}
          ],
          phone:[
            {required:true, message:'请输入手机号', trigger:'blur'},
            {min:8, max:11,message:'长度在8到11个字符',trigger:'blur'}
          ],
          address:[
            {required:true, message:'请输入地址', trigger:'blur'},
            {min:1, max:3,message:'长度在0到30个字符',trigger:'blur'}
          ]
        },
        hotelList:[],
        total: null,
        addDialogVisible:false,
        updateDialogVisible:false
      }
    },
    created() {
      const that=this
      this.getHotelList()
    },
    methods:{
      getHotelList() {
        const that = this
        this.axios.get('http://localhost:8090/hotel/findAll/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          that.hotelList = res.data.records
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
        })
      },
      handleSizeChange(newSize){
        const that = this
        // console.log(newSize)
        that.queryInfo.pagesize = newSize
        that.getHotelList()
      },
      handleCurrentChange(newPage){
        const that = this
        // console.log(that.queryInfo.pagenum)
        that.queryInfo.pagenum = newPage
        that.getHotelList()
      },
      getHotels(){
        const that = this
        // console.log(that.queryInfo.query)
        this.axios.get('http://localhost:8090/hotel/findHotel/'+that.queryInfo.query+'/'+that.queryInfo.pagenum+'/'+that.queryInfo.pagesize).then(res=>{
          // console.log(res)
          that.hotelList = res.data.records
          that.total = res.data.total
          that.queryInfo.pagesize=res.data.size
          that.queryInfo.pagenum=res.data.current
        })
      },
      addDialogClose(){
        this.$refs.addFormRef.resetFields()
      },
      addHotels(){
        const that = this
        this.axios.post('http://localhost:8090/hotel/addHotel',this.addFrom).then(res=>{
          console.log(res.data)
          if(res.data){
            that.addDialogVisible = false
            that.getHotelList()
            this.$message.success('添加成功!')
          }
        })
      },
      updateHotels(hotelcode){
        const that = this
        console.log(hotelcode)
        this.updateDialogVisible=true
        this.axios.get('http://localhost:8090/hotel/getHotel/'+hotelcode).then(res=>{
          that.updateFrom = res.data
          console.log(res.data)
        })
      },
      updateDialogClose(){
        this.$refs.updateFormRef.resetFields()
      },
      updateHotelInfo(){
        this.axios.put('http://localhost:8090/hotel/updateHotel/'+this.updateFrom.hotelcode,this.updateFrom).then(res=>{
            if(res.data) {
              this.updateDialogVisible=false
              this.getHotelList()
              this.$message.success('修改成功!')
            }
          })
    },
    async deleteHotel(hotelcode){
              const confirmsg = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).catch(err => {
                return err
              })
              // console.log(confirmsg)
              if(confirmsg != 'confirm'){
                return this.$message.info('取消删除!')
              }
              else{
                this.axios.get('http://localhost:8090/hotel/deleteHotel/'+hotelcode).then(res=>{
                  // console.log(res.data)
                  if(res.data) {
                    this.getHotelList()
                    this.$message.success('删除成功!')
                  }
                })
              }
    }
  }
  }
</script>

<style>
</style>
